<script setup lang="ts">
import { useAppStore } from "@/store/modules/app";
import { computed, unref } from "vue";
const appStore = useAppStore();

const isDark = computed(() => appStore.getIsDark);

const logoUrl = computed(() => {
  return !unref(isDark)
    ? "/src/assets/logo/black_on_trans.png"
    : "/src/assets/logo/white_on_trans.png";
});

const props = defineProps({
  isText: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div
    style="
      display: flex;
      height: var(--logo-height);
      align-items: center;
      overflow: hidden;
      cursor: pointer;
      justify-content: center;
    "
  >
    <img :src="logoUrl" style="height: calc(var(--logo-height) * 0.5)" alt="" />
    <div v-show="props.isText">
      <span style="font-size: 25px; font-weight: 800">admin</span>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
